<%--
  Created by IntelliJ IDEA.
  User: 王旭东
  Date: 2024/12/19
  Time: 17:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>团队活动</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content=""/>
    <style type="text/css">
        /* 设置整个页面的背景颜色为粉色 */
        body {
            background-color: #ffe6e6; /* 浅粉色 */
            font-family: 'Pacifico', cursive;
            color: #333;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        /* 自定义颜色变量 */
        :root {
            --primary-color: #ffb6c1;
            --secondary-color: #87cefa;
            --accent-color: #ffd700;
        }
        /* 导航栏样式 */
        .navbar {
            background-color: var(--primary-color);
            border-bottom: 2px solid var(--accent-color);
            margin-bottom: 20px;
        }
        .navbar-brand, .navbar-nav .nav-link {
            color: #fff !important;
            font-weight: bold;
        }
        /* 标题样式 */
        .heading {
            color: var(--accent-color);
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        /* 事件盒子样式 */
        .event-box {
            background: rgba(255, 255, 255, 0.9);
            margin: 10px 0;
            padding: 20px;
            border: 2px solid var(--accent-color);
            border-radius: 20px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .event-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        /* 按钮样式 */
        .btn-primary {
            background-color: var(--secondary-color);
            border: none;
            border-radius: 20px;
            transition: background-color 0.3s;
        }
        .btn-primary:hover {
            background-color: var(--accent-color);
        }
        /* 模态框样式 */
        .modal-header, .modal-footer {
            background-color: var(--primary-color);
            color: #fff;
            border-bottom: none;
        }
        .modal-title {
            color: #fff;
        }
        .modal-content {
            border-radius: 20px;
        }
        /* 图片样式 */
        .event-box img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }
        /* 容器样式 */
        .container {
            flex: 1;
            padding: 20px;
        }
    </style>
    <!-- 引入Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <!-- css files -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css" type="text/css" media="all">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4C+7s1w0k0F4z0vj0e4mZ6nY1M1m3r0H+5l0O7Kk8W9gYj6d6g6m7Kx8Q6X1jP0c9mX7jQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>
<!-- 导航栏 -->
<jsp:include page="navigation.jsp"></jsp:include>

<!-- 页面主要内容 -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2 class="heading text-center">团队活动</h2>
            <img src="${pageContext.request.contextPath}/static/images/2.png" alt="团队活动" style="width: 100%; border-radius: 20px;">
        </div>
    </div>
    <!-- 事件盒子 -->
    <div class="row">
        <c:forEach items="${blogList}" var="blog">
            <div class="col-md-3 col-sm-6 col-xs-12 event-box" data-toggle="modal" data-target="#eventModal" data-title="${blog.title}" data-address="${blog.address}" data-time="${blog.actionTime}" data-people="${blog.peoples}" data-description="${blog.event}">
                <h4>${blog.title}</h4>
                <p>${blog.address}</p>
                <p>${blog.actionTime}</p>
                <!-- 可选：添加卡通图标 -->
                <i class="fas fa-smile" style="color: var(--accent-color); font-size: 24px;"></i>
            </div>
        </c:forEach>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="eventModalLabel">活动详情</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h5 id="modalTitle"></h5>
                    <p id="modalAddress"></p>
                    <p id="modalTime"></p>
                    <p id="modalPeople"></p>
                    <p id="modalDescription"></p>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- 引入JavaScript文件 -->
<script src="${pageContext.request.contextPath}/static/js/user/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>
<script>
    $(document).ready(function(){
        $('#eventModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // 触发模态框的按钮
            var title = button.data('title');
            var address = button.data('address');
            var time = button.data('time');
            var people = button.data('people');
            var description = button.data('description');

            var modal = $(this);
            modal.find('#modalTitle').text(title);
            modal.find('#modalAddress').text(address);
            modal.find('#modalTime').text(time);
            modal.find('#modalPeople').text(people);
            modal.find('#modalDescription').text(description);
        });
    });
</script>
</body>
</html>